<template>
  <div>
    <el-dialog title="修改单词" :visible="dialogFormVisible" @update:visible="(x)=>$emit('dia',false)"
    >
      <el-form :model="form">
        <el-form-item label="单词" :label-width="formLabelWidth">
          <el-input v-model="form.word" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="翻译" :label-width="formLabelWidth">
          <el-input v-model="form.translate" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remake" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分组" :label-width="formLabelWidth">
          <el-select v-model="form.grouo" clearable filterable placeholder="请选择分组">
            <el-option
                v-for="item in grouos"
                :key="item"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="$emit('dia',false)">取 消</el-button>
        <el-button type="primary" @click="alter(form)" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "NoteAlter",
  props:{
    dialogFormVisible:Boolean,form1:Object,grouos:Array
  },

  model:{
    prop:"dialogFormVisible",
    event:"dia"
  },
  data(){
    return {
      loading:false,
      form:{},
      formLabelWidth: '120px',

    }
  },
  methods:{

    copy(r){
      return {...r}
      },

    async alter(row){

      row.userid=window.sessionStorage.getItem("ID")
      this.loading=true
     await axios({
        url:"/note/reg",
        method:"put",
        data:row
      }).then((data=>{
        if(data.data.code===1000){
          // this.data=this.copy(this.from)
          this.form=data.data.data
          this.$emit("from",this.form)
          this.$message({
            message: '修改成功',
            type: 'success'
          });
          this.loading=false
        }else {
          this.$message.error('修改失败');
          this.loading=false
        }
      })).catch(()=>{
       this.$message.error('修改失败');
       this.loading=false
     })
      this.$emit("dia",false)

    }
  },
  watch:{
    dialogFormVisible(x,y){
      if(x===true)
      this.form=this.copy(this.form1)
    }
  }
}
</script>

<style scoped>

</style>